
<template>
  <div class="login u-f u-f-ac u-f-ajc" :style="`background:url(${loginBgm});background-size:cover`">
        <section class="login-box animate__animated animate__slideInDown">
            <div class="login-left u-f u-f-ac u-f-ajc" >
               <img src="../../assets/icons/svg/login-img1.svg" alt="">
            </div>
            <div class="login-right u-f u-f-ajc" >
               <el-form :model="formModel" ref="formRef" class="login-form" status-icon>
   
               <h3 class="login-form-title u-f u-f-ac u-f-ajc">
                  vueCms
               </h3>
              
               <el-form-item prop="username">
                   <el-input v-model="formModel.username" type="text" placeholder="账号" />
               </el-form-item>

               <el-form-item prop="password">
                   <el-input v-model="formModel.password" type="password" placeholder="密码" />
               </el-form-item>

               <el-form-item prop="code">
                  <div class="u-f u-f-ajs" style="width: 100%;">
                     <div>
                        <el-input v-model.trim="formModel.code" style="width: 120px;" 
                        placeholder="验证码"></el-input>
                     </div>
                     <div>
                        <PicCode ref="picCodeRef" :width="100" :height="38" v-model:code="code" />
                     </div>
                  </div>
               </el-form-item>
               <div class="u-f u-f-ajs u-f-ac margin-bottom-15">
                  <el-checkbox :checked="formModel.rememberMe" v-model="formModel.rememberMe">
                     记住密码
                  </el-checkbox>
               </div>

               <el-form-item>
                  <el-button class="margin-bottom-10"
                     style="width:100%"
                     :loading="globalLoading"
                     @click="handleSubmit(formRef)"
                     type="primary">
                  登录
                  </el-button>
                  <el-button style="width:100%;margin-left:0px"
                     type="warning" 
                     @click="handleReset(formRef)">
                     重置
                  </el-button>
               </el-form-item>
               <el-form-item style="width: 100%;">
                   <ThirdLogin />
               </el-form-item>

             </el-form>
          </div>
        </section>
    </div>
  
   
  </template>
  
  <script setup lang="ts">
     import loginBgm from "@/assets/img/loginBgm.png";
     import PicCode from "@/components/picCode/index";
     import ThirdLogin from "./cpns/thirdLogin/index.vue";
     import {useFunc} from "@/views/login/hooks/useFunc";

     let {formModel,formRef,code,picCodeRef,globaLoading,handleSubmit,handleReset} = useFunc()
  </script>
  
  <style scoped lang="less">
  .login{
    height: 100vh;//视图高度
    position: relative;
    background: linear-gradient(180deg,#2e3d4e,#001528);
    &-box{
        display:flex;
        width: 820px;
        height: 525px;
        z-index: 999;
        box-shadow:0 2px 4px 2px rgba(0,0,0,0.08);
         .login-left{
            flex: 1;
            background: linear-gradient(60deg,rgb(39,91,214),rgb(16,54,171));
            .login-img{
                width: 100%;
                height: 100%;
                transition: all 0.3s;
                object-fit: cover;
            }
         }
         .login-right{
            width: 320px;
            height: 100%;
            box-sizing: border-box;
            background: white;
            .login-form{
               width: 84%;
               border-radius: 10px;
               .el-input{
                  height: 38px;
                  input{
                     height: 38px;
                  }
               }
               .login-form-title{
                  font-weight: 700;
                  position: relative;
               }
            }
         }
    }
  }
  
  </style>
  